<template>
	<view>

		<!-- 头部 -->
		<mini-header title="确认订单"></mini-header>

		<!-- 主体内容 -->
		<view class="wrapper">
			<view class="wrap">
				<!-- 收货地址 -->
				<address-choose ref="shippingAddress" @returnFirst="getFirstAddress" @change="onAddressChange"></address-choose>
				<!-- 商品信息 -->
				<view class="goods-wrap" >
					<view class="title">商品详情</view>
					<block v-if="goodsInfo.id">
						<view class="goods">
							<image class="thumb" :src="goodsInfo.logoUrl" mode="aspectFit"></image>
							<navigator class="name elip" :url="`/pages/goods/index?id=${goodsId}`">
								<view class="goodsName">{{goodsInfo.name}}</view>
								<view class="skuName" >{{goodsInfo.skus[0].attributeValue}}</view>
							</navigator>
							<view class="subtotal">{{goodsInfo.skus[0].price}}元 x {{num}}</view>
							<view class="amount">{{Number(goodsInfo.skus[0].price * num).toFixed(2)}}元</view>
						</view>
					</block>
				</view>
				
				<!-- 邮费信息 -->
				<view class="express-wrap">
					<view class="name">配送方式</view>
					<!-- <view class="value" v-if="expressFee">快递配送（运费{{expressFee}}元）</view> -->
					<view class="value" >包邮</view>
				</view>
				<!-- 订单小计 -->
				<view class="subtotal-wrap" >
					<view class="item">
						<view class="name">商品件数：</view>
						<view class="value">{{num}}件</view>
					</view>
					<view class="item">
						<view class="name">商品总价：</view>
						<view class="value" v-if="goodsInfo.id">{{Number(goodsInfo.skus[0].price * num).toFixed(2)}}元</view>
					</view>
					<!-- <view class="item">
						<view class="name">活动优惠：</view>
						<view class="value">-0元</view>
					</view> -->
					<view class="item">
						<view class="name">运费：</view>
						<view class="value">{{expressFee}}元</view>
					</view>
					<view class="item">
						<view class="name">应付总额：</view>
						<view class="value" v-if="goodsInfo.id">
							<text style="font-size: 30px;">{{Number(Number(goodsInfo.skus[0].price * num) + Number(expressFee)).toFixed(2)}}</text>元
						</view>
					</view>
				</view>
				
				<!-- 底部按钮 -->
				<view class="bottom-wrap">
					<view class="address-wrap" v-if="address.addrId">
						<view class="user-info">{{address.mobile}} {{address.receiver}}</view>
						<view class="address-info">
							<text>{{address.province}} {{address.city}} {{address.district}} {{address.address}}</text>
							<text class="btn-update" @click="updateAddress">修改</text>
						</view>
					</view>
					<view class="btn-wrap">
						<button class="btn btn-primary" @click="goOrder">{{address.addrId ? '立即下单' : '去结算'}}</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 选择收货地址提示 -->
		<view class="fixed-bar" v-if="fixedBar && !address.addrId && firstAddress.name">
			<view class="wrap">
				<view class="address-wrap">
					<text style="margin-right: 25px;">{{firstAddress.name}}</text>
					<text style="margin-right: 25px;">{{firstAddress.phone}}</text>
					<text>{{firstAddress.province}} {{firstAddress.city}} {{firstAddress.district}} {{firstAddress.address}}</text>
				</view>
				<button class="btn" @click="chooseFirstAddress">选择该收货地址</button>
			</view>
		</view>
		<zw-dialog :hidden="hiddenQrcode" :title="'APP下载地址'" :width="370" :height="400" @close="cancelPayment">
			<view class="qrcode-wrapper">
				<view class="qrcode-wrap">
					<image class="qrcode" src="../../static/image/common/qrcode.png"  mode="aspectFit"></image>
					
				</view>
				<view class="tips">
					<view>请使用<text class="platform">微信或浏览器</text>扫描</view>
					<view>下载安装</view>
				</view>
			</view>
		</zw-dialog>
		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import miniHeader from '@/components/common/mini-header.vue';
	import addressChoose from '@/components/order/address-choose.vue';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			miniHeader,
			addressChoose
		},
		data() {
			return {
				address: {},
				firstAddress: {},
				fixedBar: false,
				expressFee: 0,
				combination:'',
				combinationId:'',
				skuId:'',
				goodsId:'',
				goodsInfo:{
					logo:',',
					sku:[{price:0}],
				},
				comList:[],
				seller:{},
				num:0,//商品件数
				totalPrice:0,//商品价格
				userInfo:{},
				hiddenQrcode:true,
				type:0,//0乐购 1套餐
			}
		},
		
		filters: {
			calcSubtotal(price, count) {
				return (price * count).toFixed(2);
			}
		},
		onPageScroll(e) {
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.fixedBar = e.scrollTop > 300;
			}, 10);
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.skuId = e.id
			this.getGoods()
			if(e.payNum){
				this.num = Number(e.payNum)
			}
			this.userInfo =  uni.getStorageSync('userInfo')
		},
		onReady() {
			
		},
		methods: {
			//下单数据详情
			getGoods() {
				this.uni_request({
					url:  '/goods/sku/' + this.skuId,
					method: "GET",
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
						
							this.goodsInfo = res.data.data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			
			getExpressFee() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var params = {
					skuId:this.skuId,
					addrId:this.address.addrId,
					number:this.num
				};
				
				if(this.address.addrId){
					this.uni_request({
						url: '/user/freight',
						method: "POST",
						data:params,
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								this.expressFee = res.data.data.freight;
								if(this.expressFee<0){
									this.expressFee = 0
								}
							} else {
								if(res.data.code == 500){
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							}
						}
					})
				}else{
					uni.hideLoading()
				}
				
			},
			getFirstAddress(e) {
				this.firstAddress = e;
			},
			onAddressChange(e) {
				this.address = e;
				this.getExpressFee();
			},
			chooseFirstAddress() {
				this.$refs.shippingAddress.chooseAddress(0);

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			updateAddress() {
				this.$refs.shippingAddress.updateCurrent();

				uni.pageScrollTo({
					scrollTop: 150
				});
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/cart/index'
				});
			},
			
			
			cancelPayment() {
				this.hiddenQrcode = true;
			
			},
			goOrder() {
				if (!this.address.id) {
					this.$alert('请选择收货地址', {
						showCancel: false,
						confirmText: '我知道了'
					});
					return;
				}
				this.submit()
			},
			//提交订单
			submit(){
				this.$alert('确定提交订单吗？', {}, () => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					var params = {
						number: this.num,
						skuId: this.skuId,
						addrId:this.address.id,
						orderAmount:Number(this.goodsInfo.skus[0].price * this.num).toFixed(2)
					}
					this.uni_request({
						url: '/user/order',
						method: 'POST',
						data: params,
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								var price = Number(this.goodsInfo.skus[0].price*this.num)
								this.orderId = res.data.data.orderId
								var overTime = res.data.data.overTime
								uni.redirectTo({
									url:'/pages/order/pay/index?orderId='+this.orderId+'&price='+price+'&name='+this.goodsInfo.name+'&time='+overTime
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						}
					})
					
					
					
					
				});
			},
		
		}
	}
</script>

<style lang="scss">
	
	.qrcode-wrapper {
		width: 100%;
	
		.qrcode-wrap {
			width: 290px;
			height: 290px;
			position: relative;
			margin: 30px auto 10px;
	
			.qrcode {
				width: 100%;
				height: 100%;
			}
			
			.logo-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 45px;
				height: 45px;
				background-color: $bg-color;
				padding: 3px;
				border-radius: 10px;
				box-shadow: 0 0 5px $bg-color;
				
				.logo {
					width: 100%;
					height: 100%;
				}
			}
		}
	
		.tips {
			margin-bottom: 10px;
			color: $text-color;
			text-align: center;
	
			.platform {
				color: $color-primary;
				margin: 0 5px;
			}
		}
	}
	.header-wrapper {
		height: 100px;
		border-bottom: 2px solid $color-primary;

		.wrap {
			max-width: $page-width;
		min-width: $page-minwidth;
			height: 100px;
			margin: 0 8vw;
			@extend %flex-align-center;

			.title {
				font-size: 28px;
				line-height: 48px;
				color: #424242;
				margin-left: 48px;
			}

			.top-navbar {
				margin-left: auto;
				@extend %flex-align-center;
				color: #757575;
				font-size: 12px;
			}
		}
	}

	.wrapper {
		background-color: $bg-color-grey;
		padding: 40px 0 60px;

		.wrap {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 8vw;
			background-color: $bg-color;

			.goods-wrap {
				padding: 0 48px;

				.title {
					color: $text-color;
					font-size: 18px;
					line-height: 40px;
					border-bottom: 1px solid $border-color;
				}

				.goods {
					@extend %flex-align-center;
					padding: 15px 0;

					.thumb {
						width: 80px;
						height: 80px;
						margin-right: 10px;
					}

					.name {
						display: flex;align-items: flex-start;
						justify-content: flex-start;
						flex-direction: column;
						height: 80px;
						width: 650px;
						font-size: 15px;
						color: #424242;
						cursor: pointer;
						.goodsName:hover{color: #e93323;}
						.skuName{
							font-size: 13px;
							margin-top: 10px;padding: 2px 10px;
							color: #919191;
							background-color: #eeeeee;
						}
					}

					.subtotal {
						color: #424242;
						width: 150px;
						text-align: center;
					}

					.amount {
						margin-left: 100px;
						width: 190px;
						text-align: center;
						color: #e93323;
					}
				}
			}

			.express-wrap {
				border-top: 1px solid $border-color;
				padding: 25px 0;
				margin: 0 48px;
				@extend %flex-align-center;

				.name {
					color: #333;
					font-size: 18px;
					width: 150px;
				}

				.value {
					color: $color-primary;
				}
			}

			.subtotal-wrap {
				border-top: 1px solid $border-color;
				padding: 25px 0;
				margin: 0 48px;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.item {
					line-height: 2;
					@extend %flex-align-center;

					.name {
						color: #757575;
					}

					.value {
						min-width: 100px;
						text-align: right;
						color: $color-primary;
					}
				}
			}

			.bottom-wrap {
				@extend %flex-align-center;
				border-top: 2px solid #f5f5f5;
				padding: 25px 48px;

				.address-wrap {
					line-height: 20px;
					color: #424242;

					.btn-update {
						color: $color-primary;
						margin-left: 5px;
						cursor: pointer;
					}
				}

				.btn-wrap {
					margin-left: auto;
					@extend %flex-align-center;
					justify-content: flex-end;

					.btn {
						width: 158px;
						height: 38px;
						line-height: 38px;
						text-align: center;
						cursor: pointer;
						margin: 0;
						margin-left: 30px;

						&.btn-gray {
							border: 1px solid #b0b0b0;
							background-color: $bg-color;
							color: rgba(0, 0, 0, 0.27);
						}

						&.btn-primary {
							color: #FFFFFF;
							border: 1px solid $color-primary;
							background-color: $color-primary;
						}

						&:hover {
							opacity: .8;
						}
					}
				}
			}
		}
	}

	.fixed-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 70px;
		line-height: 70px;
		background-color: $bg-color;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		animation: open .5s forwards;

		@keyframes open {
			from {
				margin-top: -50%;
			}

			to {
				margin-top: 0;
			}
		}

		.wrap {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 8vw;
			@extend %flex-align-center;
			justify-content: space-between;

			.address-wrap {
				color: #757575;
			}

			.btn {
				margin-right: 0;
				width: 160px;
				height: 40px;
				line-height: 40px;
				background-color: $color-primary;
				color: #FFFFFF;
				text-align: center;
				cursor: pointer;

				&:hover {
					background-color: #f25807;
				}
			}
		}
	}
</style>
